import React, { useEffect } from 'react'
import * as PIXI from 'pixi.js'

function Mask() {
    useEffect(() => {
        // Create the application helper and add its render target to the page
        let app = new PIXI.Application({ width: 640, height: 360 });
        document.getElementById('app').appendChild(app.view);

        // Create window frame
        let frame = new PIXI.Graphics();
        frame.beginFill(0x666666);
        frame.lineStyle({ color: 0xffffff, width: 1, alignment: 0 });
        frame.drawRect(0, 0, 202, 202);
        frame.position.set(320 - 100, 180 - 100);
        app.stage.addChild(frame);

        // 创建一个图形对象来定义我们的蒙版
        let mask = new PIXI.Graphics();
        // 添加矩形区域以显示
        mask.beginFill(0xffffff);
        mask.drawRect(0,0,200,200);
        mask.endFill();

        // 添加将保存我们屏蔽内容的容器
        let maskContainer = new PIXI.Container();
        // 设置遮罩以从上方使用我们的图形对象
        maskContainer.mask = mask;
        // 将蒙版添加为子项，以便蒙版相对于其父项定位
        maskContainer.addChild(mask);
        // 由窗口的框架宽度偏移
        maskContainer.position.set(1,1);
        // 并将容器添加到窗口！
        frame.addChild(maskContainer);

        // Create contents for the masked container
        let text = new PIXI.Text(
        'This text will scroll up and be masked, so you can see how masking works.  Lorem ipsum and all that.\n\n' +
        'You can put anything in the container and it will be masked!',
        {
            fontSize: 24,
            fill: 0x1010ff,
            wordWrap: true,
            wordWrapWidth: 180
        }
        );
        text.x = 10;
        maskContainer.addChild(text);

        // Add a ticker callback to scroll the text up and down
        let elapsed = 0.0;
        app.ticker.add((delta) => {
        // Update the text's y coordinate to scroll it
        elapsed += delta;
        text.y = 10 + -100.0 + Math.cos(elapsed/50.0) * 100.0;
        });
    }, [])

    return (
        <div id="app">
            
        </div>
    )
}

export default Mask
